<template>
  <view class="model-select-container" ref="page">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="navbar-content">
        <view class="navbar-left" @click="goBack">
          <my-icon name="chevron-left" width="48rpx" height="48rpx" color="var(--primary-color)" />
        </view>
        <view class="navbar-title">选择模型</view>
        <view class="navbar-right"></view>
      </view>
    </view>

    <!-- 模型列表 -->
    <view class="model-list" :style="{ paddingTop: statusBarHeight + 88 + 'px' }">
      <view class="model-card">
        <view
          v-for="model in models"
          :key="model.id"
          class="model-item"
          :class="{ active: currentModel === model.id }"
          @click="selectModel(model)"
        >
          <view class="model-info">
            <view class="model-name">{{ model.name }}</view>
            <view class="model-description">{{ model.description }}</view>
          </view>
          <view class="model-check" v-if="currentModel === model.id">
            <my-icon name="check-circle" width="40rpx" height="40rpx" color="var(--primary-color)" />
          </view>
        </view>
      </view>
      
      <view class="model-info-card">
        <view class="info-header">
          <view class="info-icon">
            <my-icon name="info" width="48rpx" height="48rpx" color="var(--primary-color)" />
          </view>
          <text class="info-title">关于模型</text>
        </view>
        <view class="info-content">
          <text class="info-text">模型是AI对话的核心引擎，不同模型有不同的特点和能力。请根据您的需求选择合适的模型。</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import modelManager from '@/store/model.js'

export default {
  data() {
    return {
      statusBarHeight: 0,
      currentModel: '',
      models: []
    }
  },
  onLoad() {
    // 获取状态栏高度
    uni.getSystemInfo({
      success: res => {
        this.statusBarHeight = res.statusBarHeight
      }
    })
    
    // 获取当前模型和模型列表
    this.currentModel = modelManager.currentModel
    this.models = modelManager.models
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    selectModel(model) {
      this.currentModel = model.id
      modelManager.setModel(model.id)
      uni.showToast({
        title: '已切换到' + model.name,
        icon: 'none',
        duration: 1500
      })
      
      // 发送模型变化事件
      uni.$emit('modelChanged', model.id)
      
      // 延迟返回上一页
      setTimeout(() => {
        uni.navigateBack()
      }, 100)
    }
  }
}
</script>

<style>
.model-select-container {
  background-color: rgb(18, 18, 20);
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  color: #ffffff;
}

.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(18, 18, 20, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;
  border-bottom: 0.5rpx solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
}

.navbar-content {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
}

.navbar-left {
  width: 88rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-left:active {
  opacity: 0.7;
}

.navbar-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 600;
  color: #ffffff;
}

.navbar-right {
  width: 88rpx;
}

.model-list {
  padding: 32rpx 24rpx;
}

.model-card {
  background-color: #2c2c2e;
  border-radius: 24rpx;
  margin-bottom: 32rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.model-item {
  padding: 32rpx 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  transition: background-color 0.2s ease;
}

.model-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 24rpx;
  right: 24rpx;
  bottom: 0;
  height: 0.5px;
  background-color: rgba(255, 255, 255, 0.1);
  transform: scaleY(0.5);
}

.model-item:active {
  background-color: rgba(255, 255, 255, 0.05);
}

.model-item.active {
  background-color: rgba(255, 255, 255, 0.05);
}

.model-info {
  flex: 1;
}

.model-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 8rpx;
}

.model-description {
  font-size: 28rpx;
  color: #86868b;
  line-height: 1.4;
}

.model-check {
  margin-left: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.model-info-card {
  background-color: #2c2c2e;
  border-radius: 24rpx;
  margin-top: 32rpx;
  padding: 32rpx 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.info-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  gap: 12rpx;
}

.info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #ffffff;
}

.info-content {
  padding: 8rpx 0;
}

.info-text {
  font-size: 28rpx;
  color: #86868b;
  line-height: 1.5;
}

/* 适配不同平台 */
/* #ifdef H5 */
.model-select-container {
  max-width: 600px;
  margin: 0 auto;
}
/* #endif */
</style>